<template>
  <basic-container v-loading="loading">
    <transition name="search">
      <div class="micro-app-con" v-if="this.baseUrl&&!errorObj" :key="applicationId">
        <micro-app :name='pageName'
                   :inline="true"
                   :url='baseUrl'
                   :data="{applicationId:applicationId}"
                   baseroute='/micro-lowcode/'
                   @error="microError"
                   @datachange='handleDataChange'>
        </micro-app>
      </div>
      <div v-else style="font-size: 22px;color: red;padding: 20px">
        Error：{{ errorObj.message }}
      </div>
    </transition>
  </basic-container>
</template>

<script>
import subAppMixins from "@/util/subAppMixins";

export default {
  name: "microLowcode",
  mixins: [subAppMixins],
  data() {
    return {
      applicationId: localStorage.getItem("appId"),
      errorObj: null,
      loading: false,
      pageName: "",
      baseUrl: window.location.origin + "/lowcodeBase/",

      replaceCode: "micro-lowcode"
    };
  },
  methods: {
    handleDataChange(e) {
      const {loading} = e.detail.data;
      this.loading = loading;
    }
  },
  mounted() {
  },
  watch: {
    "$route": {
      handler(v) {
        this.pageName = v.params[0] + localStorage.getItem("appId") + JSON.stringify(v.query);
      },
      deep: true,
      immediate: true
    },
  },
};
</script>

<style lang="scss">
.micro-app-con {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;

  &::-webkit-scrollbar {
    width: 0;
  }
}
</style>
